<template>
    <div class="mask-wrapper">
      <div class="mask-title">
        <div class="mask-name">{{seller.name}}</div>
        <div class="star-box">
          <star :score="seller.score" :size="size"></star>
        </div>
      </div>
      <div class="discount-msg">
        <div class="discount-title">
          <span class="line"></span>
          <span class="title">优惠信息</span>
          <span class="line"></span>
        </div>
        <ul class="discount-content">
          <li v-for="(item, index) in seller.supports" :key="index" class="discount-item">
            <span class="item-icon" :class="calssMap[item.type]"></span>
            <span class="item-text">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <div class="notice">
        <div class="notice-title">
          <span class="line"></span>
          <span class="title">商家公告</span>
          <span class="line"></span>
        </div>
        <div class="notice-text">
          {{seller.bulletin}}
        </div>
      </div>
      <div class="close" @click="closeMask">
        <span class="icon-close"></span>
      </div>
    </div>
</template>


<script>
import star from "./star.vue";

export default {
  props: {
    seller: {
      type: Object
    }
  },
  data() {
    return {
      size: 48,
      calssMap: []
    }
  },
  methods: {
    closeMask() {
      this.$emit("closeMaskState", false)
    }
  },
  components: {
    star
  },
  created() {
    this.calssMap = ["decrease", "discount", "guarantee", "invoice", "special"]
  }
}
</script>


<style lang="stylus" ref="stylesheet/stylus">
@import '../assets/stylus/index.styl';
.mask-wrapper
  padding 0 36px
  .mask-title
    padding 64px 0 28px 0;
    text-align center
    .mask-name  
      font-size 16px
      font-weight 700
      color rgb(255, 255, 255)
      line-height 16px
  .star-box
    margin-top 16px
  .discount-msg
    .discount-title
      display flex
      align-items center
      .line
        display inline-block
        width 112px
        height 1px
        background-color rgba(255, 255, 255, .2)
      .title
        font-size 12px
        font-weight 500
        color rgb(255, 255, 255)
        line-height 12px
        padding 0 12px
    .discount-content
      padding 24px 12px
      li:nth-child(n + 2)
        margin-top 12px
      .discount-item
        display flex
        align-items center
        .item-icon
          display inline-block
          width 16px
          height 16px
          background-size 16px 16px
          margin-right 6px
          &.decrease
            bg-image(decrease_1)
          &.discount
            bg-image(discount_1)
          &.guarantee
            bg-image(guarantee_1)
          &.invoice
            bg-image(invoice_1)
          &.special
            bg-image(special_1)
        .item-text
          font-size 12px
          font-weight 200
          color rgb(255, 255, 255)
          line-height 12px
  .notice
    .notice-title
      display flex
      align-items center
      .line
        display inline-block
        width 112px
        height 1px
        background-color rgba(255, 255, 255, .2)
      .title
        font-size 12px
        font-weight 500
        color rgb(255, 255, 255)
        line-height 12px
        padding 0 12px
    .notice-text
      padding 24px 12px 0
      font-size 12px
      font-weight 200
      color rgb(255, 255, 255)
      line-height 24px
  .close
    position absolute
    bottom 32px
    left 50%
    transform translate3d(-50%, 0, 0)
    .icon-close
      font-size 32px
      color rgba(255, 255, 255, .5)



    
          

      
        

</style>
